/**
 * MailDev - style.css
 *
 * Author: Dan Farrelly <daniel.j.farrelly@gmail.com>
 * Licensed under the MIT License.
 */


@import 'normalize';
@import 'mixins';
@import 'fa/fontawesome';
//@import 'fa/regular';
@import 'fa/solid';
//@import 'fa/brand';


/**
 * Variables
 */

$brand:             rgb(73, 148, 206);

$toolbarHeight:     2.8em;
$searchHeight:      2.4em;




/**
 * Basic layout and main elements
 */

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        Segoe UI,
        Helvetica,
        Arial,
        sans-serif,
        Apple Color Emoji,
        Segoe UI Emoji;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}




/**
 * Generic & Helper Classes
 */

.clearfix:before,
.clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; }

.hidden {
    display: none !important;
}

// AngularJS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
    display: none !important;
}

th, td {
    padding: 0.4em 0.6em;
    &:first-child { padding-left: 0; }
    &:last-child { padding-right: 0; }
}



/**
 * Specific Styles
 */

body.dark-theme {
    background-color: darken($brand, 46);
}

.application-container {
    @include display-flex();
    @include align-items(stretch);
    flex-flow: row nowrap;
    height: 100%;
    width: 100%;
    overflow: hidden;
}



.main-container {
    @include flex(1 70%);
    overflow-y: hidden;
}



.sidebar {
    @include flex(1 33%);
    max-width: 26em;
    height: 100%;
    background: white;
    body.dark-theme & {
        background-color: darken($brand, 38);
    }
}


.sidebar-header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 26em;
    background: $brand;
    border-right: 1px solid darken($brand, 16);

    body.dark-theme & {
        background-color: darken($brand, 32);
        border-right-color: darken($brand, 28);
    }

}





.brand-container {
    padding: 0.3em 0 0 0.8em;
    height: $toolbarHeight;
    box-sizing: border-box;
    border-bottom: 1px solid darken($brand, 6);
    body.dark-theme & {
        border-bottom-color: darken($brand, 28);
    }
}

.brand {
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    color:rgb(255,255,255);
    text-decoration: none;

    i {
        margin-right: 0.1em;
    }

    @media (max-width: 1100px) {
        margin-top: 0.15em;
        font-size: 18px;
        i {
            display: none;
        }
    }
}
.brand-text {
    font-weight: 500;
}
.brand-unread {
    font-size: 13px;
    font-weight: 400;
    color:rgba(white,.75);
    cursor: default;
}



.header-nav {
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: $toolbarHeight;
    padding-right: 0.4em;
}
.header-nav-list {
    box-sizing: border-box;
    display: block;
    list-style: none;
    @include display-flex();
    margin: 0;
    padding: 0;
    height: 100%;

}
.header-nav-item {
    box-sizing: border-box;
    display: block;
    height: 100%;
}
.header-nav-item-link {
    @include display-flex();
    @include align-items(center);
    @include align-content(center);
    @include justify-content(center);
    flex-flow: row nowrap;
    box-sizing: border-box;
    height: 100%;
    width: 2em;
    text-align: center;

    text-decoration: none;
    font-size: 1em;
    font-weight: 400;
    color: rgba(white,.75);
    padding: 0;
    i {
        display: block;
        text-align: center;
        font-size: 14px;
        line-height: 1;
        margin-bottom: 0.05em;
    }
    i.danger {
        color: red;
    }
    &:hover {
        background: rgba(white,.1);
    }

    @media (max-width: 1100px) {
        width: 1.6em;
        i {
            font-size: 12px;
        }
    }

}

.header-nav-more {

}

.header-nav-more-menu.header-nav-more-menu {
    box-sizing: border-box;
    position: absolute;
    top: 1.5em;
    right: 0;
    min-width: 14em;

}

.header-nav-switch {

    padding: 0.5em 0.5em;
    display: block;
    box-sizing: border-box;
    cursor: pointer;

    &:hover {
        background: darken(white,5);
    }
    &.disabled {
        pointer-events: none;
        user-select: none;
        opacity: .75;
    }

}


.header-nav-switch input {
    $size: 14px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    display: inline-block;
    height: $size;
    width: 2 * $size;
    margin-right: 0.3em;
    vertical-align: middle;
    margin-bottom: 2px;
    content: "";
    background: lighten($brand,32);
    border-radius: 1em;
    cursor: pointer;
    outline: none;

    &::before {
        display: block;
        height: $size;
        width: $size;
        margin-bottom: 2px;
        content: "";
        background: lighten($brand,16);
        //box-shadow: 0px 0px 0px 2px inset white;
        border-radius: 50%;
        transition: margin 100ms;
    }

    &:checked::before {
        margin-left: $size;
        background-color: darken($brand, 20);
    }

    &:disabled {
        pointer-events: none;
        opacity: .5;
    }
}



.sidebar-content {
    height: 100%;
}



.sidebar-emails-container {
    box-sizing: border-box;
    height: calc(100% - #{1 * $toolbarHeight});
    overflow-x: hidden;
    overflow-y: hidden;
    border-right: 1px solid darken(white, 10);
    body.dark-theme & {
        border-right-color: darken($brand, 32);
    }

}



.sidebar-scrollable-content {
    box-sizing: border-box;
    height: calc(100% - #{$searchHeight});
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid darken(white, 10);
    body.dark-theme & {
        border-top-color: darken($brand, 32);
    }
}





.search-container {
    position: relative;
    height: $searchHeight;
}

.search-icon {
    position: absolute;
    top: 0.7em;
    left: 0.8em;
    color: darken(white,55);
    body.dark-theme & {
        color: darken(white,15);
    }
}

.search-input {
    box-sizing: border-box;
    display: block;
    margin: 0;
    height: 100%;
    padding: 0.5em 0.8em 0.5em 2.4em;
    width: 100%;

    background-color: white;
    border: 0;
    color: black;
    -webkit-font-smoothing: antialiased;

    &:focus {
        outline: none;
        background-color: darken(white, 5);
        + .search-icon {
            color: black;
        }
    }


    &::-webkit-input-placeholder{
        color: rgba(black,.5);
    }
    &::-moz-placeholder{
        color: rgba(black,.5);
    }
    &::-ms-placeholder{
        color: rgba(black,.5);
    }
    &::placeholder  {
        color: rgba(black,.5);
    }


    body.dark-theme & {
        background-color: darken($brand, 38);
        color: rgba(white,1);
        & + .search-icon {
            color: rgba(white,.5);
        }

        &:focus {
            background-color: darken($brand, 38);
            & + .search-icon {
                color: rgba(white,1);
            }
        }


        &::-webkit-input-placeholder{
            color: rgba(white,.5);
        }
        &::-moz-placeholder{
            color: rgba(white,.5);
        }
        &::-ms-placeholder{
            color: rgba(white,.5);
        }
        &::placeholder  {
            color: rgba(white,.5);
        }
    }

}









.emails-loading,
.emails-empty {
    padding: 0.8em 1em;
    font-weight: 400;
    font-size: 14px;
    color: rgba(black,.65);
    body.dark-theme & {
        color: rgba(white,.5);
    }

}

.email-list {
    margin: 0; padding: 0;
    list-style: none;
}

.email-item {


}


.email-item-link {
    display: block;
    padding: 0.9em 1em 1.1em;
    background: white;
    border-top: 1px solid darken(white,5);
    text-decoration: none;
    font-size: 12px;
    line-height: 14px;
    position: relative;

    &:focus {
        outline: none;
        //box-shadow: 3px 0 0 0 lighten($brand,15) inset;
        &::after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            pointer-events: none;
            background: rgba(black,.05);
            content: '';
        }
    }
    .title {
        display: block;
        position: relative;
        margin-bottom: 0.2em;
        font-size: 14px;
        line-height: 1.3em;
        font-weight: 400;
        color: rgba(black,.95);
        i {
            opacity: .8;
        }
        body.dark-theme & {
            color: rgba(white,.8);
        }
    }
    .title-subline {
        font-size: 12px;
        font-weight: 400;
        word-break: break-word;
        color: rgba(black,.6);
        body.dark-theme & {
            color: rgba(white,.6);
        }
    }
    .subline {
        font-size: 12px;
        font-weight: 400;
        display: block;
        word-break: break-word;
        color: rgba(black,.6);
        body.dark-theme & {
            color: rgba(white,.6);
        }
    }
    body.dark-theme & {
        background-color: darken($brand, 38);
        border-top-color: darken($brand, 32);
    }
    body.dark-theme &:focus::after {
        background: rgba(white,.07);
    }
}

.email-item:first-of-type .email-item-link {
    border-top: none;
}

.email-item:last-of-type .email-item-link {
    border-bottom: 1px solid darken(white,5);
    body.dark-theme & {
        border-bottom-color: darken($brand, 32);
    }
}

.email-item.unread .email-item-link {
    background: lighten($brand,38);
    border-top-color: lighten($brand,34);
    border-bottom-color: lighten($brand,34);
    .title {
        //color: darken($brand,30);
        font-weight: 600;
        body.dark-theme & {
            color: rgba(white,.88);
        }
    }
    body.dark-theme & {
        background-color: darken($brand, 28);
        border-top-color: darken($brand, 23);
        border-bottom-color: darken($brand, 23);
    }
}

.email-item.unread + .email-item .email-item-link {
    border-top-color: lighten($brand,34);
    body.dark-theme & {
        border-top-color: darken($brand, 23);
    }
}

.email-item.current .email-item-link {
    background: darken($brand,0);
    .title {
        color: rgba(white,.95);
        font-weight: 400;
    }
    .title-subline {
        color: rgba(white,.7);
    }
    .subline {
        color: rgba(white,.7);
    }
    body.dark-theme & {
        background: darken($brand,5);
    }
}








.main-content {
    margin: 1.5em 2em;
    color: black;
    a {
        color: black;
    }

    h1 {
        margin-top: 0;
        font-size: 1.6em;
    }
    body.dark-theme & {
        color: white;
        a {
            color: white;
        }
    }
}




.email-container {
}

.email-content {
    box-sizing: border-box;
    z-index: 1;
    height: calc(100vh - #{$toolbarHeight});
    //border-top: 1px solid darken(white,10);
}

.email-content-view {
    height: 100%;
}

.email-content-view-html {
    text-align: center;
    background: lighten($brand, 42);

    body.dark-theme & {
        background: darken($brand, 52);
    }
}

.email-content-view-plain {
    height: 100%;
    overflox-x: hidden;
    overflow-y: auto;
}

.preview-iframe {
    box-sizing: border-box;
    border:0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative; // set position for resize rendering issue
    //border: 1px solid darken(white,10);
    background: darken(white,0);
    body.dark-theme & {
        background: darken($brand, 46);
    }
}


.email-toolbar {
    box-sizing: border-box;
    width: 100%;
    height: $toolbarHeight;
    background-color: white;
    background: darken($brand, 12);
    border-bottom: 1px solid darken($brand, 16);
    list-style: none;
    margin: 0;
    padding: 0;

    @include display-flex();
    @include align-items(center);
    @include align-content(center);
    @include justify-content(center);
    flex-flow: row nowrap;

    font-size: 14px;


    li {
        display: inline-block;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    li a {
        display: inline-block;
        height: 100%;
        text-decoration: none;
        padding: 0 0.8em 0 0.5em;
        &, &:visited {
            color: white;
        }
        &:focus {
        }
        &:hover {
            background: rgba(white,.1);
        }

    }

    li a span {
        box-sizing: border-box;
        height: 100%;
        @include display-flex();
        @include align-items(center);
        @include align-content(center);
        @include justify-content(center);
        flex-flow: row nowrap;
        padding-bottom: 0.12em;
    }

    li a span i {
        display: block;
        text-align: center;
        width: 1.6em;
        vertical-align: baseline;
        font-size: 16px;
        margin-right: 0.2em;
    }


    body.dark-theme & {
        background-color: darken($brand, 38);
        border-bottom-color: darken($brand, 32);
    }


}

.email-meta {
    box-sizing: border-box;
    width: 100%;
    background-color: white;
    background: lighten($brand, 38);
    border-bottom: 1px solid lighten($brand, 28);
    margin: 0;
    padding: .5em 1em;
    font-size: 14px;

    .row {
        @include display-flex();
        flex-flow: row nowrap;

        @media (max-width: 1100px) {
            flex-wrap: wrap;
            flex-direction: column;
            & + .row {
                margin-top: .5em;
            }
        }
    }

    .description {
        flex-basis: 5em;
        flex-shrink: 0; 
        display: inline-block;
        text-align: right;
        margin-right: .25em;
        color: desaturate(darken($brand, 12), 20);

        @media (max-width: 1100px) {
            text-align: left;
            flex-basis: 0;
            margin-right: 0;
        }
    }

    .description-value {
        flex-grow: 1;
    }

    .subject {
        font-size: 20px;
        margin-bottom: .5em;
    }


    .address .address-address {
        color: rgba(lighten(black, 25), .40);
    }
    .address .address-name {
        color: lighten(black, 30);
    }

    app-address + app-address::before {
        content: ', ';
    }


    body.dark-theme & {
        background-color: darken($brand, 28);
        border-bottom-color: darken($brand, 18);
        color: white;

        .description {
            color: desaturate(lighten($brand, 12), 20);
        }

        .address .address-address {
            color: rgba(darken(white, 40), .65);
        }
        .address .address-name {
            color: darken(white, 30);
        }
    }

}


.dropdown-container {
    position: relative;
}

.dropdown-trigger {

    &.open {
        + .dropdown-menu {
            display: block;
        }
    }
    &.disabled {
        pointer-events: none;
        user-select: none;
        opacity: .5;
    }
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 2.5em;
    left: 0;
    z-index: 10;
    padding: 0.3em 0;
    min-width: 14em;
    list-style: none;
    background-color: white;
    border-radius: 0px;
    box-shadow: 0 1px 5px 0px rgba(black,0.2);

    li {
        padding: 0;
        display: block;
    }

    li a span {
        @include display-flex();
        @include justify-content(start);
    }

    &.open {
        display: block;
    }
}
.dropdown-menu.dropdown-menu.dropdown-menu li a {
    display: block;
    padding: 0.5em 0.5em;
    color: black;
    &:hover {
        background: darken(white,5);
    }
    &.disabled {
        pointer-events: none;
        user-select: none;
        opacity: .5;
    }
}


.panel-plain {
    box-sizing: border-box;
    padding: 1em 1em;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    white-space: pre-wrap;
    body.dark-theme & {
        color: white;
    }
}



.panel-attachments {
    box-sizing: border-box;
    padding: 1em 1em;

    body.dark-theme & a {
        color: white;
    }

}
.panel-headers {
    box-sizing: border-box;
    padding: 1em 1em;
    table {

    }
    td,
    th {
        text-align: left;
    }

    td:first-of-type {
        text-align: right;
    }
    body.dark-theme & {
        color: white;
    }
}

.panel-source {
    body.dark-theme & {
        background: white;
    }
}